<template>
	<view class="header">
		<view class="navbar" :class="{'navbar-mini':!matchLeftWindow,'popup-menu':popupMenuOpened}">
			<view class="navbar-left">
				<view class="logo pointer" @click="linkTo">
					<image class="logoImg" src="../static/logo.png" mode="heightFix" style="margin-right: 20rpx;"></image>
					<image class="huanying" src="../static/huanying.jpg" style="margin-top: 12rpx;"></image>
				</view>
				<uni-icons @click="toggleSidebar" type="bars" class="menu-icon" size="30" color="#999"></uni-icons>
			</view>
			<view class="" style="margin-left: 30px;">
				<view class="" style="display: flex;">
					<uni-icons type="list" size="29" style="vertical-align: middle;line-height: 69px;"></uni-icons>
					<!-- <uni-section title="自定义弹层宽度" type="line" padding style="margin-left: 15px;">
					      <uni-tooltip content="提示文字swswsws">幼儿园</uni-tooltip>
					 </uni-section> -->
					<!-- <uni-data-checkbox v-model="disFlag" :localdata="gender" @change="sexChange"></uni-data-checkbox> -->
					<view class="" style="vertical-align: middle;" v-if="beWithout">
						<uni-data-select  v-model="disFlag" :clear="false" :localdata="gender" @change="changeGender"></uni-data-select>
					</view>
					<view class="singleton" v-else>
					   {{userInfo.schoolName?userInfo.schoolName:userInfo.username}}
					</view>
				</view>
				<!-- <view class="logo pointer" @click="linkTo">
					<image class="logoImg" src="../static/logo.png" mode="heightFix" style="margin-right: 20rpx;"></image>
					<image class="huanying" src="../static/huanying.jpg" style="margin-top: 12rpx;"></image>
				</view> -->
				<!-- <uni-icons type="list" class="menu-icon" size="30" color="#999"></uni-icons> -->
			</view>
			<view class="navbar-middle">
				<text class="title-text">{{navigationBarTitleText}}</text>
			</view>
			<view class="navbar-right pointer">
				<!-- #ifdef H5 -->
				<view  @click="showErrorLogs" class="menu-item debug pointer">
					<svg class="svg-icon">
						<use xlink:href="#icon-bug"></use>
					</svg>
					<!-- <uni-badge class="debug-badge" text="2222" type="error"></uni-badge> -->
				</view>
				<!-- #endif -->

				<!-- <picker mode="selector" :range="langs" range-key="text" @change="changeLanguage">
					<view class="admin-icons-lang flex lang-icon" />
				</picker> -->

				<view class="" style="position: relative;">
					<view v-show="userInfo.username" class="navbar-user" @click="togglePopupMenu">
						<view class="admin-icons-user user-icon" />
						<view class="username ml-s"><text>{{userInfo.username}}</text></view>
						<uni-icons class="arrowdown" type="arrowdown" color="#666" size="13"></uni-icons>
					</view>
					<view class="uni-mask" @click="togglePopupMenu" />
					<view class="navbar-menu">
						<template v-if="userInfo.username">
							<view class="menu-item hover-highlight" @click="changePassword">
								<text>修改密码</text>
							</view>
							<view class="menu-item hover-highlight">
								<text class="logout pointer" @click="logout">退出登录</text>
							</view>
						</template>
						<view class="popup-menu__arrow"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 弹出新增页面 -->
		<uni-popup class="updatePopup" background-color="#fff" ref="popup" type="center" :mask-click="false">
			<view class="tags-manager">
				<!-- 升班 -->
				<view class="">
					<view class="mb">修改密码</view>
					<uni-forms ref="form" v-model="publiconj" :rules="rules" validateTrigger="bind" @submit="submit">
					<view class="el-dialog__body">
						<uni-forms-item  name="userLoginPwd" label="旧密码" labelWidth='70' required>
							<uni-easyinput v-model="publiconj.userLoginPwd" type="password" :clearable="false" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item  name="newUserLoginPwd" label="新密码" labelWidth='70' required>
							<uni-easyinput v-model="publiconj.newUserLoginPwd" type="password" :clearable="false" placeholder="请输入" />
						</uni-forms-item>
						<view class="uni-group1">
							<button @click="close" class="uni-button">关闭</button>
							<button @click="managerMultiTag" class="uni-button" type="primary">保存</button>
						</view>
					</view>
					</uni-forms>
				</view>
			</view>
		</uni-popup>
		
		
	<!-- 	<uni-popup ref="errorLogsPopup" type="center">
			<view class="modal">
				<scroll-view class="modal-content" scroll-y="true">
					<error-log class="error-table" />
				</scroll-view>
			</view>
		</uni-popup> -->
		<!-- 沉余代码，临时处理 uni-datetime-picker 国际化不生效的问题 -->
		<!-- #ifdef H5 -->
		<uni-datetime-picker type="date" v-show="false"></uni-datetime-picker>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
	  dictList, //字典项
	} from '@/api/user.js'
	
	import { basicUserDeptlist,basicUserDeptpost } from '@/api/school.js'
	
	import {staffPwd} from '@/api/workers.js';
	export default {
		props: {
			navigationBarTitleText: {
				type: String
			},
			matchLeftWindow: {
				type: Boolean
			},
			showLeftWindow: {
				type: Boolean
			}
		},
		computed: {
			
			// ...mapState('app', ['routes']),
			// ...mapState('user', ['userInfo']),
			// ...mapState('error', ['logs'])
		},
		data() {
			return {
				selected: {
					index: 0,
				},
				publiconj:{
					userLoginPwd:'',
					newUserLoginPwd:''
				},
				rules: {
					userLoginPwd: {
						rules: [{
								required: true,
								errorMessage: '请填写旧密码'
							},
						]
					},
					newUserLoginPwd: {
						rules: [{
								required: true,
								errorMessage: '请填写新密码'
							},
						]
					}
				},
				current: 0,
				indexPage: [{
					tabBar: '/pages/tabbar/tab1/tab1',
					index: '/pages/index/index'
				},{
					tabBar: '/pages/tabbar/tab2/tab2',
					index: '/pages/table/index'
				}],
				userInfo:this.$util.getUser(),
				popupMenuOpened: false,
				gender:[],
				disFlag:'',
				beWithout:false, 
			}
		},
		watch: {
			$route: {
				immediate: true,
				handler(newRoute) {
					this.disFlag = this.$util.getUser().tenantId;
					this.gender = this.gender.length>0?this.gender:this.$util.getDropdownoptions();
					// if(newRoute.path!='/pages/login/index'&&newRoute.path!='/pages/subPack/AppointmentRegistration/apply'){
					// 	this.dictList(); // 字典项
					// }
					
					if(newRoute.path=='/pages/index/index'){
						this.basicUserDeptlist(); //切换学校
						this.dictList(); 
					}else{
						if( this.$util.getDropdownoptions().length>0){
							let options = [];
							options =  this.$util.getDropdownoptions();
							this.beWithout = options[0].beWithout;
						}
					}
					const width = uni.getSystemInfoSync().screenWidth;
					if (width >= 768) {
						let path = newRoute.path
						
						let comp='';
						if (path === '/') {
							// comp = 'tabbar'
							path = '/pages/tabbar/tab1/tab1'
						} else {
							comp = path.split('/')[2]
						}
						console.log('屏幕宽度',width)
						// this.current = this.selected[comp]
						console.log('path',path)
						for (const item of this.indexPage) {
							if (path === item.tabBar) {
								console.log('item.index',item.index)
								uni.redirectTo({
									url: item.index
								})
							}
						}
					}else{
						
					}
					if(this.userInfo.username){
						uni.removeStorageSync('storage_key')
					}else{
						this.userInfo = uni.getStorageSync('storage_key')
					}
				},
			}
		},
		onLoad() {
		},
		mounted() {
		},
		methods: {// 字典项
			dictList(){
				dictList().then(
					res => {
						if (res.data.code=='0') {
							this.$util.setdictionary(res.data.data);
						}else{
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.$api.showTip('服务器错误')
					}
				);		
			},
			
			
			basicUserDeptlist(){
				basicUserDeptlist({userMobile:this.$util.getUser().phone}).then(
					res => {
						if (res.data.code=='0') {
							this.gender = [];
							if(res.data.data.length>1){
								res.data.data.forEach(bg => {
									this.gender.push({
										text: bg.deptName,
										value: bg.tenantId,
										beWithout:true
									});
								})
								this.beWithout = true;
								this.$util.setDropdownoptions(this.gender);
							}else{
								res.data.data.forEach(bg => {
									this.gender.push({
										text: bg.deptName,
										value: bg.tenantId,
										beWithout:false
									});
								})
								this.$util.setDropdownoptions(this.gender);
								this.beWithout = false;
							}
						}else{
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.$api.showTip('服务器错误')
					}
				);		
			},
			
			changeGender(e){
				if(e){
					let newUserinfoobj = {};
					newUserinfoobj = this.$util.getUser();
					newUserinfoobj.tenantId = e;
					let arr = this.gender.filter((i) => {
					  return e == i.value;
					});
					newUserinfoobj.schoolName = arr[0].text;
					this.$util.setUser(newUserinfoobj);
					this.basicUserDeptpost(e);
				}
			},
			
			
			basicUserDeptpost(e){
				basicUserDeptpost(e).then(
					res => {
						if (res.data.code=='0') {
							setTimeout(() => {
								this.$router.go(0)
							}, 500)
							
						}else{
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.$api.showTip('服务器错误')
					}
				);		
			},
			
			changePassword() {
				this.$refs.popup.open();
			},
			close(){
			 this.$refs.popup.close();
			 this.publiconj.userLoginPwd = '';
			 this.publiconj.newUserLoginPwd = '';
			}, 
			
			managerMultiTag(){
				this.$refs.form.submit();
			},
			submit(event){
				const {
					value,
					errors
				} = event.detail
				// 表单校验失败页面会提示报错 ，要停止表单提交逻辑
				
				
				if (errors) {
					return
				}
				
				
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				this.publiconj.userId = this.userInfo.userId;
				this.publiconj.userLoginName  = this.userInfo.loginName;
				staffPwd(this.publiconj).then(
					res => {
						if (res.data.code=='0') {
							this.$api.showTip("修改成功", () => {
							this.close();
							this.logout();
							});
						}else{
							this.$api.showTip(res.data.msg)
						}
						uni.hideLoading();
					},
					err => {uni.hideLoading();}
				);		
			},
			linkTo() {
				uni.reLaunch({
					url: '/'
				})
			},
			toggleSidebar() {
				if (!this.showLeftWindow) {
					uni.showLeftWindow()
				} else {
					uni.hideLeftWindow()
				}
			},
			togglePopupMenu() {
				this.popupMenuOpened = !this.popupMenuOpened
			},
			showErrorLogs() {
				if (this.popupMenuOpened) {
					this.popupMenuOpened = false
				}
				this.$refs.errorLogsPopup.open()
			},
			showPasswordPopup() {
				if (this.popupMenuOpened) {
					this.popupMenuOpened = false
				}
				this.$refs.passwordPopup.open()
			},
			toSecondMenu(e) {
				const activeTabBar = '/' + e.pagePath
				console.log('点击地址',activeTabBar)
				for (const item of this.indexPage) {
					if (activeTabBar === item.tabBar) {
						uni.redirectTo({
							url: item.index
						})
					}
				}
			},
			logout(){
				this.popupMenuOpened = !this.popupMenuOpened;
				this.userInfo = {};
				uni.removeStorageSync('storage_key');
				this.$util.clearCache();
				uni.redirectTo({
					url: '/pages/login/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 50px;
		width: 100%;
		
		box-sizing: border-box;
		border-bottom: 1px solid darken($top-window-bg-color, 8%);
		background-color: $top-window-bg-color;
		color: $top-window-text-color;
	}

	.navbar {
		font-size: 14px;
		position: relative;
		height: 100%;
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color:$top-window-bg-color;
	}

	.logo {
		min-width: 223px;
		display: flex;
		align-items: center;

		.logoImg {
			// logo宽高开发者可根据情况自行调节
			width: 30px;
			height: 30px;
		}
		.huanying{
			width: 100px;
			height: 38px;
		}

		text {
			margin-left: 8px;
		}
	}

	.menu-icon {
		width: 30px;
		height: 30px;
		line-height: 30px;
	}

	.navbar-middle,
	.navbar-right {
		flex: 1;
		/* #ifdef MP */
		margin-right: 97px;
		/* #endif */
	}

	.navbar-left {
		display: flex;
		height: 100%;
		
	}

	// 在平板以下，保持navbar-middle
	@media screen and (max-width: 767px) {
		.navbar-left {
			flex: 1;
			margin-top: 20px;
			/* #ifdef MP */
			margin-right: 97px;
			/* #endif */
		}
	}

	.navbar-middle,
	.username {
		display: flex;
		align-items: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.navbar-middle {
		text-align: center;
	}

	.username {
		max-width: 150px;
	}

	.title-text {
		font-size: 14px;
		line-height: 30px;
	}

	.navbar-menu {
		display: flex;
	}

	.menu-item {
		padding: 8px;
		font-size: 16px;
		color: #555;
		line-height: 1;
	}

	.debug {
		margin: 0 30px;
		display: inline-block;
		position: relative;
	}

	.debug-badge {
		position: absolute;
		top: 5px;
		right: 14px;
		transform: translateY(-50%) translateX(100%) scale(0.8);
	}

	.arrowdown {
		margin-top: 4px;
		margin-left: 3px;
	}

	.person {
		margin-top: 2px;
		margin-right: 2px;
	}

	.navbar-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.navbar-right .uni-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0);
		z-index: 999;
	}

	.popup-menu__arrow {
		position: absolute;
		top: -6px;
		right: 20px;
		border-width: 6px;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #ebeef5;
		filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .1));
	}

	.popup-menu__arrow::after {
		content: " ";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 10px;
		top: 1px;
		margin-left: -10px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}

	/* 大屏时，隐藏的内容 */
	.menu-icon,
	.navbar-middle,
	// .navbar-user,
	.popup-menu__arrow,
	.navbar-right .uni-mask {
		display: none;
	}

	/* 小屏，显示的内容 */
	.navbar-mini .menu-icon {
		display: block;
	}

	.navbar-user {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 小屏时，隐藏的内容 */
	.navbar-mini .logo,
	.navbar-mini .debug,
	.navbar-menu,
	// .navbar-mini .navbar-menu .username
		{
		display: none;
	}

	.navbar-menu {
		width: 100px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		/* #ifdef MP */
		// right: 97px;
		/* #endif */
		top: 27px;
		/* #ifndef H5 */
		// top: 85pxs: ;
		/* #endif */
		background-color: #fff;
		z-index: 999;
		padding: 10px 0;
		background-color: #fff;
		border: 1px solid #ebeef5;
		border-radius: 4px;
		box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
	}

	/* 小屏时，弹出下拉菜单 */
	.popup-menu .navbar-menu {
		display: flex;
	}

	.popup-menu .popup-menu__arrow,
	.popup-menu .navbar-right .uni-mask {
		display: block;
	}

	.hover-highlight:hover {
		color: $menu-text-color-actived;
	}

	.svg-icon {
		width: 1em;
		height: 1em;
		vertical-align: -.15em;
		fill: currentColor;
		overflow: hidden;
	}

	.password-popup {
		padding: 30px;
	}


	.language-item {
		font-stretch: 12px;
		vertical-align: baseline;
		text-decoration: underline;
	}

	.lang-icon {
		font-size: 18px;
		margin-top: 5px;
		margin-right: 30px;
	}

	.user-icon {
		font-size: 20px;
	}
	
	
		.tags-manager {
			width: 600px;
			padding: 40px 30px;
			border-radius: 5px;
			background-color: #fff;
		}	
		
		
		.uni-group1 {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-wrap: wrap;
		    word-break: keep-all;
		}
		
		.uni-group1 .uni-button {
		    margin: 10px;
		}
		
		.mb{
			font-size: 40rpx;
			
		}
		.el-dialog__body{
			padding: 30px 20px;
			color: #606266;
			font-size: 14px;
			word-break: break-all;
		}
		
		/deep/.uni-stat__select{
			padding-top: 17px !important;
			padding-left: 0px !important;
		}
		
		/deep/.uni-select__input-text{
			width: 190px  !important;
			color: #3a3a3a;
			
		}
		
		/deep/.uni-select{
			border:none !important;
		}
		
		.singleton{
			padding: 24px 0 0 5px;
			font-size: 14px;
		}
</style>
